<template>
  <!-- 1.测试高德地图和递归用法 -->
  <div>
    测试页面
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.onLoad = function() {
      //1.地图容器，后面的对象可进行配置
      var map = new AMap.Map("container", {
        //地图等级，等级越高，显示的越详细
        zoom: 12,
        //地图的中心坐标
        center: [117.5, 36.6],
        // 构造点标记
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        //开启 3D 地图
        viewMode: "3D"
      });
    };

    //用js创建一个script标签，然后对src和字符集属性进行设置
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=34bf8bef9e64bd0ee6be16f8aaf8685e&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  }
};
</script>

<style lang="less" scoped>
//地图容器的宽高设置
#container {
  width: 500px;
  height: 500px;
}
</style>